<!--
@author ljy
20220409
表格工具栏，用于配合表格使用
 一、用法
（一）基本用法（例子参照部门菜单：@/components/uem/DepartmentTreeSelect.vu）
1.1 引入组件的方式
import TableToolbar from '@/components/TableToolbar.vue';
1.2 使用方式
<TableToolbar
        ref="columnSettingRef"
        class="operation-button"
        :tableColumns="tableColumns"
        @changeColumnSelect="getColumnsSelected"
      />
1.3 参数说明：
（1）tableColumns，表格的列集合属性
（2）changeColumnSelect(columnsSelected:string[])
当选中的表格列发生变化时触发，参数columnsSelected表示最新的列选择属性
(二）插槽
1 表格左侧工具栏的右侧插槽
例：在左侧工具栏右侧插入一个图标
<template #toorbar_left_right>
  <el-button icon="Plus" type="primary" style="margin-left: 0;">分配角色</el-button>
</template>
-->
<template>
  <div>
    <el-row justify="space-between"  class="table-operation">
      <el-col :span="14" class="operation-left">
        <el-button v-if="showAddNewButton" icon="Plus" type="primary" class="button" @click="addRow">新增</el-button>
        <el-button v-if="showDeleteMultipleSelectionButton" :disabled="!multipleSelection.length" icon="delete" type="danger" class="button" @click="deleteMultipleSelection">删除</el-button>
        <el-button v-if="typeof importUrl ==='string' && importUrl.length" icon="Upload" type="primary" plain class="button" @click="uploadExcel">
          <template v-if="importButtonText">
            {{importButtonText}}
          </template>
          <template v-else>
            导入
          </template>
        </el-button>
        <template v-if="isTreeTable">
          <el-button class="button" @click="expandAll">展开全部</el-button>
          <el-button class="button" @click="shrinkAll">折叠全部</el-button>
        </template>
        <!--表格左侧工具栏的右侧的插槽-->
        <slot name="toorbar_left_right" class="button">
        </slot>
      </el-col>
      <el-col :span="10" class="operation-right">
        <!--      <el-icon :size="20"><refresh /></el-icon>-->
        <!--      <el-icon :size="20"><Setting /></el-icon>-->
        <el-button icon="refresh" class="operation-button" @click="refreshTable"/>
        <TableToolbarColumnSetting
          ref="columnSettingRef"
          class="operation-button"
          :table-columns="tableColumns"
          @changeColumnSelect="getColumnsSelected"
        />
        <el-button icon="Bottom" class="operation-button" v-if="downloadTemplateUrl" @click="downloadTemplate">模板下载</el-button>
        <el-button icon="Bottom" class="operation-button" v-if="downloadUrl" @click="downloadData">数据下载</el-button>
        <!--      <el-button icon="Upload" class="operation-button" v-if="importUrl">数据导入</el-button>-->
      </el-col>
    </el-row>
    <!-- 电子表格上传 -->
    <ExcelUploadDialog
      ref="excelUploadDialogRef"
      title="数据上传"
      :autoUpload="false"
      :templateFileName="templateFileName"
      :downloadTemplateUrl="downloadTemplateUrl"
      :importExcelSuccessAndCloseDialog="importExcelSuccessAndCloseDialog"
      @uploadSuccess="uploadExcelSuccess"
    />
  </div>
</template>

<script lang="ts" setup>
import TableToolbarColumnSetting from '@/components/base/table/TableToolbarColumnSetting.vue';
// 导入上传电子表格组件
import ExcelUploadDialog from '@/components/base/dialog/ExcelUploadDialog.vue';
import {
  defineProps, getCurrentInstance, ref, isRef, defineExpose, withDefaults,
} from 'vue';
import { TableColumn } from '@/types/interface/base_interface';
import { downloadFromUrl } from '@/api/utils/FileUtil';
import { ElMessage } from 'element-plus';

const { proxy } = getCurrentInstance();
// 读取父容器传递过来的选择列表
interface Props {
  query: Record<string, any>, // 查询表单对象
  loadTableList:()=>void, // 读取并刷新表格数据。// 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  isTreeTable?:boolean, // 是否树形表格，如果为树形表格，会增加扩展和折叠两个按钮，默认为不是树形表格
  tableColumns:TableColumn[], // 表格列集合
  multipleSelection:any[], // 选中的表格记录，配合表格多选框使用
  showAddNewButton?:boolean, // 在表格工具栏是否显示新增按钮
  showDeleteMultipleSelectionButton?:boolean, // 在表格工具栏是否显示删除按钮
  downloadTemplateUrl?:string, // 下载模板地址，也决定表格工具栏是否显示下载模板按钮
  templateFileName?:string, // 下载模板的文件名
  downloadUrl?:string, // 下载表格地址，也决定表格工具栏是否显示下载表格按钮
  dataFileName?:string, // 下载数据的文件名
  importUrl?:string, // 导入地址，决定是否显示导入按钮
  importButtonText?:string, // 导入按钮的名称
  importExcelSuccessAndCloseDialog?:boolean, // 上传成功是否自动关闭对话框
}
const props = withDefaults(defineProps<Props>(), {
  isTreeTable: false,
  showAddNewButton: true,
  showDeleteMultipleSelectionButton: true,
  importExcelSuccessAndCloseDialog: true,
  templateFileName: '数据导入模板.xlsx',
  dataFileName: '数据记录.xlsx',
});
// 当动态列选项发生变化时触发
const getColumnsSelected = (columnsSelected:string[]) => {
  proxy.$emit('changeColumnSelect', columnsSelected);
};
// 刷新表格动作，用于配合表格插件实现表格的loading动画
const refreshTable = async () => {
  proxy.$emit('tableLadding', true);
  await props.loadTableList();
  proxy.$emit('tableLadding', false);
};

// 点击添加按钮
const addRow = () => {
  // 传递给父容器事件进行处理
  proxy.$emit('addRow');
};

// 点击删除按钮
const deleteMultipleSelection = () => {
  // 传递给父容器事件进行处理
  proxy.$emit('deleteMultipleSelection');
};

// 点击展开全部
const expandAll = () => {
  // 传递给父容器事件进行处理
  proxy.$emit('expandAll');
};

// 点击折叠全部按钮
const shrinkAll = () => {
  // 传递给父容器事件进行处理
  proxy.$emit('shrinkAll');
};
// 表格模板下载
const downloadTemplate = async () => {
  // 下载文件或弹出错误信息
  downloadFromUrl(props.downloadTemplateUrl!, null, props.templateFileName);
};
// 表格数据下载
const downloadData = async () => {
  // 下载文件或弹出错误信息
  downloadFromUrl(props.downloadUrl!, props.query, props.dataFileName);
};
// 表格上传组件对象
const excelUploadDialogRef = ref();
// 点击打开上传文件按钮
const uploadExcel = () => {
  // asdf
  excelUploadDialogRef.value.openDialog(props.importUrl);
};
// 当表格上传成功
const uploadExcelSuccess = () => {
  // 重新加载表格
  props.loadTableList();
};
defineExpose({
  getColumnsSelected,
});

</script>

<style lang="scss" scoped>
.table-operation{
  margin: 5px 0;
  .operation-left{
    .button{
      margin:0 5px 0 0;
    }
  }
  .operation-right{
    text-align:right;
    .operation-button{
      margin:0 0 0 5px;
    }
  }
}

</style>
